<template>
	<view class="pages-team">
		<!-- #ifndef H5 -->
		<uni-nav-bar :fixed="true" :shadow="false" :statusBar="true" title="我的团队" leftIcon=""
			color="#ffffff" :backgroundColor="primaryColor">
		</uni-nav-bar>
		<view :style="{height:`${configInfo.navBarHeight}px`}"></view>
		<fixed :top="configInfo.navBarHeight">
		<!-- #endif -->
		<!-- #ifdef H5 -->
		<fixed>
			<!-- #endif -->
			<tab @change="handerTabChange" :list="tabList" :activeIndex="activeIndex*1" :activeColor="primaryColor"
				:width="100/tabList.length + '%'" height="100rpx"></tab>
			<view class="b-1px-b"></view>
		</fixed>
		<view class="space-lg"></view>
		<view class=" radius-16 ml-lg mr-lg mb-md fill-base pd-lg" v-for="(item,index) in list.data" :key="index">
			<view class="flex-y-center">
				<image :src="item.work_img" mode="aspectFill" class="header"></image>
				<view class="pl-md">
					<view class="f-mini-title text-bold">{{item.name}}</view>
					<view class="pt-sm f-paragraph c-title">{{item.mobile}}</view>
				</view>
			</view>
			<view class="flex-y-center pt-md" v-if="item.dept_name">
				<text class="f-desc c-paragraph item-title">部门：</text>
				<text class="f-desc c-title">{{item.dept_name}}</text>
			</view>
			<view class="flex-y-center " :class="[{'pt-sm': item.dept_name }, {'pt-md': !item.dept_name }]">
				<text class="f-desc c-paragraph item-title">服务(单)：</text>
				<text class="f-desc c-title">{{item.ser_num}}</text>
			</view>
			<view class="flex-y-center pt-sm">
				<text class="f-desc c-paragraph item-title">入驻时间：</text>
				<text class="f-desc c-title">{{$util.formatTime(item.create_time*1000)}}</text>
			</view>
		</view>
		<load-more :noMore="list.current_page>=list.last_page&&list.data.length>0" :loading="loading"
			v-if="loading">
		</load-more>
		<abnor v-if="!loading&&list.data.length<=0&&list.current_page==1"></abnor>
		<view class="space-footer"></view>
		
		<!--部门-->
		<w-picker mode="selector" :options="deptLsit" :themeColor="primaryColor" :defaultProps="defaultProps"
			:visible.sync="showDept" @confirm="selectConfirm($event , 'dept_id')">
		</w-picker>
		<!--服务量-->
		<w-picker mode="selector" :options="serList" :themeColor="primaryColor" 
			:visible.sync="showSer" @confirm="selectConfirm($event , 'ser_order')">
		</w-picker>
		<!--加入时间-->
		<w-picker mode="selector" :options="timeList" :themeColor="primaryColor" 
			:visible.sync="showTime" @confirm="selectConfirm($event , 'time_order')">
		</w-picker>
		
		<view class="space-footer"></view>
		<view :style="{height: `${configInfo.tabbarHeight}px`}"></view>
		<tabbar :cur="3"></tabbar>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	import siteInfo from '@/siteinfo.js';
	import tabbar from "@/components/tabbar.vue"
	
	export default {
		components: {
			tabbar
		},
		data() {
			return {
				showDept: false,
				showSer: false,
				showTime: false,
				loading: true,
				defaultProps: {
					label:"name",
					value:"id"
				}
			}
		},
		computed: mapState({
			primaryColor: state => state.config.configInfo.primaryColor,
			subColor: state => state.config.configInfo.subColor,
			configInfo: state => state.config.configInfo,
			tabList: state => state.personal.tabList,
			activeIndex: state => state.personal.activeIndex,
			list: state => state.personal.list,
			param: state => state.personal.param,
			pageActive: state => state.personal.pageActive,
			deptLsit: state => state.personal.deptLsit,
			serList: state => state.personal.serList,
			timeList: state => state.personal.timeList,
			coachInfo: state => state.user.coachInfo,
		}),
		async onLoad(options) {
			this.$util.showLoading()
			this.initIndex()
		},
		async onPullDownRefresh() {
			// #ifndef APP-PLUS
			uni.showNavigationBarLoading()
			// #endif
			this.initRefresh();
			uni.stopPullDownRefresh()
		},
		onReachBottom() {
			if (this.list.current_page >= this.list.last_page || this.loading) return;
			this.loading = true;
			this.getList(this.param.page + 1);
		},
		methods: {
			...mapActions(['getConfigInfo', 'getMyTeam', 'getDeptList', 'getCoachInfo']),
			...mapMutations(['updatePoolItem', 'updateHomeItem', 'updatePersonalItem']),
			async initIndex(refresh = false){
				if(refresh || !this.configInfo.id){
					await this.getConfigInfo()
				}
				if(!this.coachInfo.id || refresh){
					await this.getCoachInfo()
				}
				if(this.pageActive && !refresh){
					this.$util.hideAll()
					this.isLoad = true
					this.loading = false
					return
				}
				await Promise.all([this.getList(1),this.getDeptList()])
			},
			initRefresh(){
				this.$util.showLoading()
				this.initIndex(true)
			},
			async getList(page = 0) {
				if (page) {
					let param = this.$util.deepCopy(this.param)
					param.page = page
					this.updatePoolItem({
						key: 'param',
						val: param
					})
				}
				let {
					param
				} = this
				
				try {
					await this.getMyTeam(param)
					this.loading = false
					this.$util.hideAll()
				} catch (e) {
					this.loading = false
					this.$util.hideAll()
				}
			},
			handerTabChange(index) {
				this.updatePoolItem({
					key: 'activeIndex',
					val: index
				})
				uni.pageScrollTo({
					scrollTop: 0
				})
				let key = {
					0: 'showDept',
					1: 'showSer',
					2: 'showTime'
				}
				this[key[index]] = true
			},
			selectConfirm(e, type){
				console.log(e, type)
				let param = this.$util.deepCopy(this.param)
				if(type == 'time_order'){
					param.ser_order = 0
				}
				param[type] = e.value
				this.updatePersonalItem({
					key: 'param',
					val: param
				})
				this.$util.showLoading()
				this.getList(1)
			}
		},
	}
</script>


<style lang="scss">
	.pages-team {
		.header{
			width: 85rpx;
			height: 85rpx;
			border-radius: 85rpx;
		}
		.item-title{
			width: 140rpx;
		}
	}
</style>
